<!--
 * @Date: 2022-12-25 14:59:55
 * @LastEditors: 于波
 * @LastEditTime: 2022-12-25 16:45:03
 * @Description: 文章列表组件
-->
<template>
	<div class="item">
		<div class="title">
			<router-link target="_blank" :to="`/article/${props.ArticleInfo.id}`">{{
				props.ArticleInfo.title
			}}</router-link>
		</div>
		<p class="content">
			{{ props.ArticleInfo.describe }}
		</p>
		<div class="item-bottom">
			<div class="type" v-if="props.ArticleInfo.typeId != 0">
				<span class="iconfont blog-fenlei"></span>
				{{ props.ArticleInfo.type }}
			</div>
			<div class="time">
				<span class="iconfont blog-shijian"></span>
				{{ formatPast(props.ArticleInfo.createTime, "-") }}
				<!-- {{ dayjs(props.ArticleInfo.createTime).format("YYYY-MM-DD") }} -->
			</div>
			<div class="user">
				<span class="iconfont blog-yonghu"></span>
				{{ props.ArticleInfo.username }}
			</div>
		</div>
	</div>
</template>

<script setup>
import dayjs from "dayjs";
import { formatPast } from "@/utils";
const props = defineProps({
	ArticleInfo: {
		type: Object,
		default: () => ({
			id: "",
			title: "",
			content: "",
			type: "",
			typeId: "",
			createTime: "",
		}),
	},
});
</script>

<style lang="less" scoped>
.item {
	padding: 20px;
	box-sizing: border-box;
	.title {
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
	}
	.content {
		margin: 20px 0;
		color: rgb(105, 105, 105);
		text-indent: 2em;
	}
	.item-bottom {
		display: flex;
		color: rgb(122, 122, 122);
		justify-content: flex-end;
		.type,
		.time,
		.user {
			min-width: 150px;
			span {
				margin-right: 5px;
			}
		}
	}
}
</style>
